Booking Engine Tracking API
Tracking API
The BOOKING ENGINE provides two powerful ways to integrate the tracking of your choice:
- Including arbitrary analytics and tracking scripts via the Google Tag Manager (GTM abbreviated)
- Include arbitrary analytics and tracking scripts via the Custom JS integration.
If you want to include Google Analytics 4 (GA4 abbreviated) please see our Google Analytics 4 Integration setup guide. It guides you through setting GA4 up with a GTM container, which will take you from "zero" to your personal GTM container incl. GA4 tracking in around 30 minutes.
If you want to learn how to make your Custom JS react to events triggered by the BOOKING ENGINE booking engine, continue here.
Adding Custom JS
When adding custom javascript into the booking engine, then it is the customer's responsibility to ensure that his code does not break standard functionality. In case of problems you can view your booking engine without modifications using the URL parameter skd-vanilla-mode=true.
You may add Custom JS to any of your BOOKING ENGINE circles by navigating to "Booking Engines > Overview" and picking your circle (group).
From there continue to the "Circle Configuration" and click "edit".
At the bottom of the following page, you'll find the Custom JS section. Make sure to enable the feature and add your callbacks and custom code.
Data types
- Simple Date Represents Date objects and are provided as Strings in the format "YYYY-MM-DD". For example, "2018-06-12" for 12Th of June 2018.
- Date and Time Represents Date objects and are provided as Strings in the format "YYYY-MM-DDTHH:MM:SS", with HH in 24 hours format. For example, "2018-06-12T23:05:12" for 12Th of June 2018 at 23:05:12.
- Currencies All currencies are represented by a String with the corresponding three-character ISO code. For example, CAD for Canadian Dollar, BRL for Brazil Real, USD for Unite State Dollar, etc.
- Rates All rates are represented by Float numbers.
- Language Languages are represented by a String with the corresponding two-character ISO code. For example, en for English, es for Spanish, de for German, etc.
- Country Codes Countries are represented by a String with the corresponding two-character ISO code. For example, ES for Spain, AR for Argentina, AT for Austria, etc.
Call Back Functions
Public callback functions are available to respond to a variety of actions such as clicking on the "Search" button. This allows addressing custom tracking requirements.
Custom functions are registered via bookingFlowCustomTracking.pushHandler
window.bookingFlowCustomTracking.pushHandler('viewOffers', function(eventData){
// your code goes here
});
Example for own Thank-You Page:
window.bookingFlowCustomTracking.pushHandler('viewConfirmation', function(eventData){
window.location.assign("WEBSITE?ResId="+eventData.reservationId) // change Placeholder "WEBSITE" to your own URL
});
The following table provides an overview of the available callback methods and the available event data.
| Method | Description | Example Payload |
|---|---|---|
| pageLoaded | trigger after page is loaded | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "isMobile": false } |
| searchBtnClick | User clicks on "Search" | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "searchData": { "languageCode": "de", "currencyCode": "EUR", "startDate": "2021-04-16", "endDate": "2021-04-17", "promotionCode": "", "rooms": [ { "numberOfGuest": 3, "numberOfAdults": 2, "numberOfChildren": 1, "actualAges": [2] } ] } } |
| searchDataChange | The user has changed one of the following search criteria: * dates * occupancy * language * currency * promotionalCode | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "searchData": { //see searchBtnClick example }, "triggeredBy": "dates" } |
| viewOffers | List of offers is being rendered | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "searchData": { //see searchBtnClick example }, "numOffers": 2, "maxOfferValue": 99.90, "minOfferValue": 120.90, "rooms": [ { "code": "R1", "rates": [ "CODE1", "CODE2" ] } ] } |
| viewRoomDetails | Room Details are expanded | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "roomCode": "ROOM_1" } |
| viewPackage | Detail page for a package is being rendered | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "packageCode": "PACKAGE_CODE_1" } |
| viewRoomPermlink | trigger when room perm link is viewed | { "propertyCode": "<code>", "channelId": "ibe", "roomCode": "ROOM_1" } |
| viewPackagePermlink | trigger when package perm link is viewed | { "propertyCode": "<code>", "channelId": "ibe", "rateCode": "PACKAGE_CODE_1" } |
| viewServices | triggered on Services page | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "searchData": { //see searchBtnClick example }, "rooms": [ { "rateCode": "STD", "roomCode": "ROOM_1", "occupancy": { "numberOfGuest": 2, "numberOfAdults": 2, "numberOfChildren": 0, "actualAges": [] } } ] } |
| viewPersInfo | Personal information page is being displayed | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "searchData": { //see searchBtnClick example }, "rooms": [ { "rateCode": "STD", "roomCode": "ROOM_1" } ], "services": [], "priceMode": "asInPricelist", "total": 357, "hotelCurrency": "CAD", "hotelServicesTotal": 0, "hotelRoomTotal": 333, "hotelTotal": 357 } |
| viewConfirmation | Booking confirmation page is being rendered. | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "reservationId": "DSRE53ED8GFGY", "totalWithoutTaxes": 333, "total": 357, "currencyCode": "CAD", "searchData": { //see searchBtnClick example }, "bookingData": { "rooms": [ { "roomCode": "ROOM_1", "roomRate": "STD", "roomTotal": 333, "adults": 2, "children": 0, "dailyRates": [ { "date": "2021-04-16", "price": 333, "originalPrice": null } ] } ], "services": [], } } |
| shoppingCartElementRemoved | Triggered each time a guest removes an offer (room/rate or package) or a service from his shopping cart. Clearing the shopping cart when changing the occupancy or the checkin/checkout dates will trigger these events too. | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "DEMO_TST_DSR2", "currentShoppingCart": { "rooms": [ { "currencyCode": "EUR", "rateCode": "SUPER_RATE", "roomCode": "SHAREDR", "total": 35, "userPrice": 38.82, "occupancy": { "numberOfGuest": 2, "numberOfAdults": 2, "numberOfChildren": 0, "actualAges": [] } } ], "services": [] }, "viewPort": { "screenSize": "xlarge", "viewPort": [ 1409, 1328 ] }, "elementRemoved": { "type": "service", "data": { "serviceCode": "RRRRRRRR", "quantity": 5, "price": 1, "currencyCode": "EUR" } }, "shoppingCartItems": [ { "currencyCode": "EUR", "item_id": "SHAREDR_SUPER_RATE", "price": 35 } ] } |
| shoppingCartElementAdded | Triggered each time a guest puts an offer (room/rate or package) or a service into his shopping cart. | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "currentShoppingCart": { "rooms": [ { "currencyCode": "EUR", "rateCode": "SUPER_RATE", "roomCode": "SHAREDR", "total": 35, "userPrice": 38.82, "occupancy": { "numberOfGuest": 2, "numberOfAdults": 2, "numberOfChildren": 0, "actualAges": [] } } ], "services": [] }, "viewPort": { "screenSize": "xlarge", "viewPort": [ 1409, 1328 ] }, "elementAdded": { "type": "room", "data": { "roomCode": "SHAREDR", "rateCode": "SUPER_RATE", "occupancy": { "numberOfGuest": 2, "numberOfAdults": 2, "numberOfChildren": 0, "actualAges": [] }, "currencyCode": "EUR", "quantity": 1, "price": 38.82 } }, "shoppingCartItems": [ { "currencyCode": "EUR", "item_id": "SHAREDR_SUPER_RATE", "price": 35 } ] } |
| viewBooking | Booking is displayed, e.g. opened by email link | { "userCountryCode": "AT", "channelId": "ibe", "propertyCode": "<code>", "reservationId": "DSRE53ED8GFGY", "status": "Reserved", "bookingData": { "cancelPenalty": 107.10, "startDate": "2021-04-16", "endDate": "2021-04-17", "currencyCode": "CAD", "bookedDate": "2021-04-13T13:33:44", "total": 357, "paymentIfCancelled": 107.10 } } |